<template>
  <div class="titleList">
    <div class="goodsTilte" style=" vertical-align: top;">
      <span class="require">*</span>产品尺码：
      <div class="textC marT">(最多添加40个)</div>
    </div>
    <!-- 循环获取颜色 -->
    <div class="titleDetail">
      <w-checkbox-group @on-change="selectSizeGroup" v-model="sizeIdList">
        <!-- 复选框 -->
        <div class="checkItem" v-for="(item, index) in specList" :key="index">
          <w-checkbox-item :label="item.specpropertyName" :result="item.specpropertyName">{{item.specpropertyName}}</w-checkbox-item>
          <i class="u-sku-del" v-if="item.isDel" @click="specList.splice(index, 1)"></i>
        </div>
        <!-- 其他 -->
        <div class="addNewOther">
          <div class="addNewC" v-show="!showInput" @click="showInput = true">
            <img src="../../../assets/addInfo/btn_add.png" alt="" class="addBtnP">
            <span>其他</span>
          </div>
          <!-- 新增显示输入框 -->
          <div class="addNewC" v-show="showInput">
            <w-input holder="尺码名称" rule="isGoodsName" error="请输入中文，字母，数字或其组合" v-model="specpropertyName"></w-input>
            <button class="btn btnAdd" type="button" @click="addNewSize">提交</button>
          </div>
        </div>
      </w-checkbox-group>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Array,
      default: () => []
    },
    institutionId: {
      type: [String, Number],
      default: 0
    },
    productId: {
      type: [String, Number],
      default: 0
    },
    list: Array
  },
  data() {
    return {
      // 是否展示颜色输入框
      showInput: false,
      // 选中的尺码id
      sizeIdList: [],
      // 颜色尺码
      sizeList: [],
      // 属性列表
      specList: [],
      // 颜色
      specpropertyName: ''
    }
  },
  created() {
    this.specList = JSON.parse(JSON.stringify(this.list))
    if (this.value) {
      this.sizeIdList = []
      this.value.forEach(v => {
        this.sizeIdList.push(v.specpropertyName)
      })
    }
  },
  watch: {
    value() {
      if (this.value) {
        this.sizeIdList = []
        this.value.forEach(v => {
          this.sizeIdList.push(v.specpropertyName)
        })
      }
    }
  },
  methods: {
    addNewSize() {
      // 如果没有输入颜色，则直接抛出
      if (!this.specpropertyName) {
        this.$toast('请输入尺码')
        return
      }
      let isInList = this.specList.filter(v => {
        return v.specpropertyName == this.specpropertyName
      })
      // 如果当前输入的颜色，已经输入过
      if (isInList.length > 0) {
        this.$toast('此尺码已经在列表中，请重新换一种尺码')
        return
      }
      this.specList.push({
        specpropertyName: this.specpropertyName,
        isDel: true
      })
      this.$emit('on-add', {
        specpropertyName: this.specpropertyName,
        isDel: true
      })
      this.specpropertyName = ''
      this.showInput = false
    },
    /**
     * 选择了尺码
     *
     * @param { Object } sizeId 选中的尺码id
     */
    selectSizeGroup(name) {
      // 备份一下当前操作的对象
      let arrList = JSON.parse(JSON.stringify(this.sizeList))
      // 清空一下列表数据（防止脏数据）
      this.sizeList = []

      // 将复选框中选中的id遍历出来放到列表中，返还给父级
      this.sizeIdList.forEach(v => {
        this.specList.forEach(v1 => {
          if (v == v1.specpropertyName) {
            let size = JSON.parse(JSON.stringify(Object.assign({}, v1, this.getSizeItem(arrList, v))))
            // 如果当前库存没有输入，则初始化一个库存
            if (!size.specpropertyInventCount) {
              this.$set(size, 'specpropertyInventCount', '')
            }
            this.sizeList.push(size)
          }
        })
      })
      // 通知父级处理完成
      this.$emit('input', this.sizeList)
      this.$emit('change', `${this.institutionId}${this.productId}`)
    },

    /**
     * 判断一个id是否在尺码列表中
     *
     * @param { Array }  arrList  上一个处理的对象
     * @param { Number } sizeName 尺码id
     */
    getSizeItem(arrList, sizeName) {
      let item = arrList.filter(v => {
        return v.specpropertyName == sizeName
      })
      return (item[0] || {})
    }
  }
}
</script>

<style lang="scss" scoped>
.titleList {
  .color-group {
    display: inline-block;
    float: right;
    line-height: 18px;

    .color-box {
      border: 1px solid #d9d7d7;
      display: inline-block;
      width: 10px;
      height: 10px;
    }
  }
}
</style>